<template>
  <div class="CeremonyHall  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="110px" class="PageItem margintop20">
        <el-row :gutter="20" class="fileSearch">
          <el-col :span='6'>
            <el-form-item label="逝者姓名:" prop="deadName">
              <el-input v-model="ruleForm.deadName" clearable></el-input>
            </el-form-item>
            <el-form-item label="墓穴编号:" prop="mxCaseNo">
              <el-input v-model="ruleForm.mxCaseNo" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label="骨灰状态:" prop="businessType">
              <el-select v-model="ruleForm.businessType" placeholder="请选择" class="user-dialog-input">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="格位编号:" prop="gwCaseNo">
              <el-input v-model="ruleForm.gwCaseNo" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label="骨灰追溯编号:" prop="businessCode">
              <el-input v-model="ruleForm.businessCode" clearable></el-input>
            </el-form-item>
            <el-form-item label="是否迁出:" prop="outFlag">
              <el-select v-model="ruleForm.outFlag" placeholder="请选择" class="user-dialog-input">
                <el-option
                  v-for="item in typeOptions2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label="证件号:" prop="certificateNo">
              <el-input v-model="ruleForm.certificateNo" clearable></el-input>
            </el-form-item>
            <el-form-item prop="saveFirstLevel" label="选择园区">
              <el-select
                v-model="ruleForm.saveFirstLevel"
                filterable
                placeholder="请选择"
                class="user-dialog-input"
              >
                <el-option
                  v-for="item in parksOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="4" style="margin-left:110px">
            <el-form-item>
              <el-button type="primary" size="medium" @click="onSubmit('search')" icon="el-icon-search">
                查询
              </el-button>
              <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight">
          <el-table-column
            type="index"
            label="编号"
            width="50">
          </el-table-column>
          <el-table-column prop="deadName" align='center' label="逝者姓名"></el-table-column>
          <el-table-column prop="deadGender" align='center' label="姓别"></el-table-column>
          <el-table-column prop="cremationDate" align='center' label="火化日期"></el-table-column>
          <el-table-column prop="moveCreate" align='center' label="迁入日期"></el-table-column>
          <el-table-column prop="businessType" align='center' label="骨灰状态">
            <template slot-scope="scope">
              {{ scope.row.businessType === 'gm_mx_in' ? '安葬':'寄存' }}
            </template>
          </el-table-column>
          <el-table-column prop="businessCode" align='center' label="骨灰追溯编号"></el-table-column>
          <el-table-column prop="certificateNo" align='center' label="证件号"></el-table-column>
          <el-table-column prop="mxPositionName" align='center' label="墓穴节点"></el-table-column>
          <el-table-column prop="gwPositionName" align='center' label="格位节点"></el-table-column>
          <el-table-column prop="picture" align='center' label="安葬图片(点击放大)" width="160px">
            <template slot-scope="scope">
              <!-- {{ scope.row.picture === null ? '无':'有' }} -->
               <el-image
                class="el_img"
                v-if="scope.row.images.length>0"

                style="width: 100px; height: 70px"
                :src="scope.row.images[0]"
                :preview-src-list="scope.row.images">
              </el-image>
              <el-image
                class="el_img"
                v-else
                style="width: 100px; height: 70px"
                :src="require('../../../static/images/noImg.png')"
                >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="outFlag" align='center' label="是否迁出">
            <template slot-scope="scope">
              {{ scope.row.outFlag === 'yes' ? '是':'否' }}
            </template>
          </el-table-column>
          <el-table-column prop="sourcetype" align='center' label="历史数据">
            <template slot-scope="scope">
              {{ scope.row.sourcetype === 'web' ? '是':'否' }}
            </template>
          </el-table-column>
        </el-table>
<!--        <div style="text-align: center;-->
<!--                    height: 0px;-->
<!--                    line-height: 20px;-->
<!--                    font-size: 18px;">-->
<!--          显示{{ pager.total === 0 ? 0 : (Math.ceil(pager.total / pager.pageSize) > 1 ? ((pager.currentPage - 1) *-->
<!--          pager.pageSize + 1) : (1)) }}到{{ pager.total === 0 ? 0 : ((Math.ceil(pager.total / pager.pageSize) ===-->
<!--          pager.currentPage) ? (pager.total) : (pager.currentPage * pager.pageSize)) }}条-->
<!--        </div>-->
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>

    </div>
  </div>
</template>

<script>
  import * as Type from '@/api/cemetery/cemetery'

  export default {
    name: "UserRecord",
    data() {
      return {
        parksOptions: [],
        loading: false,
        type: [],
        ruleForm: {
          deadName: "",
          businessType: "",
          businessCode: "",
          certificateNo: "",
          mxCaseNo: "",
          gwCaseNo: "",
          outFlag: ""
        },
        pager: {
          pageSize: 20,
          total: 1,
          currentPage: 1
        },
        tableData: [],
        dictionary: {},
        tableHeight: 0,
        //按钮权限
        btnRight: {
          btnCremationRecordSearch: true, //查询
        },
        //骨灰状态
        typeOptions: [
          {value: 'gm_gw_in', label: '寄存'},
          {value: 'gm_mx_in', label: '安葬'}
        ],
        //骨灰状态
        typeOptions2: [
          {value: 'yes', label: '是'},
          {value: 'no', label: '否'}
        ]

      }
    },
    components: {},
    //载入按钮
    mounted() {
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
      }

      this.onSubmit();
      this.getParks();
      var that = this
      window.onresize = function () {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight = dom - search - 190
      }
    },
    //注销window.onresize事件
    destroyed() {
      window.onresize = null;
    },
    updated() {
      this.$nextTick(() => {
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight = dom - search - 190
      })
    },
    methods: {
      //查看图片
      checkImgs(imgs){
        console.log('图片',imgs)
      },
      //默认初始值方法
      defaultValue() {},

      onSubmit(value) {
        var that = this;
        this.loading = true
        if (value) {
          this.pager.currentPage = 1;
        };
        //console.log("submitPageSize:"+that.pager.pageSize);


        var postData = {
          "deadName": this.ruleForm.deadName,
          "businessType": this.ruleForm.businessType,
          "businessCode": this.ruleForm.businessCode,
          "certificateNo": this.ruleForm.certificateNo,
          "mxCaseNo": this.ruleForm.mxCaseNo,
          "gwCaseNo": this.ruleForm.gwCaseNo,
          "outFlag": this.ruleForm.outFlag,
          "pageSize": that.pager.pageSize,
          "currentPage": this.pager.currentPage,
          'saveFirstLevel':this.ruleForm.saveFirstLevel,
          "orderField	": "",     //排序字段
          "orderType": ""        //排序顺序
        }

        //查询接口
        //console.log(postData)
        Type['getDeadInfo'](postData).then(response => {
          const {data} = response;
          if (!data) {
            this.loading = false;
            this.$message('数据读取失败')
            return
          }
          this.tableData = data.list;
          data.pager.pageSize = that.pager.pageSize;
          this.pager = data.pager
          this.loading = false
          //数据读取成功
        }).catch(error => {
          this.$message(error)
          this.loading = false
          this.tableData = []
        })
      },
      getParks() {
        Type['getParks']().then(res => {
          this.parksOptions = res.data;
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["ruleForm"].resetFields();
        this.onSubmit();
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pageSize = size;
        this.onSubmit()
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        this.onSubmit()  //点击第几页
      },

    }
  }
</script>

<style scoped>
  .el_img{
    cursor: pointer;
  }
  .w150 {
    width: 150px;
  }
</style>
